<template>
  <div>
    <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
      <el-form-item label="市场名称：">
        <el-select v-model="searchForm.marketId" placeholder="请选择市场" >
          <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属车商：" prop="shopId">
        <el-select v-model="searchForm.shopId"
                   filterable
                   remote
                   placeholder="请选择车商">
          <el-option v-for="(item,index) in store.shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="商户法人:" >
        <el-input v-model="searchForm.shopLegalName"  clearable placeholder="商户法人"></el-input>
      </el-form-item>
      <el-form-item  label="起始日期范围:" >
        <el-date-picker type="date" :editable='edit' v-model="searchForm.beginStartDate" name="beginStartDate" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>-
        <el-date-picker type="date" :picker-options="pickerOptions1" :editable='edit' v-model="searchForm.beginEndDate" name="beginEndDate" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item  label="截止日期范围:" >
        <el-date-picker type="date" :editable='edit' v-model="searchForm.overStartDate" name="overStartDate" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>-
        <el-date-picker type="date" :picker-options="pickerOptions2" :editable='edit' v-model="searchForm.overEndDate" name="overEndDate" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="合同到期时间:">
        <el-select v-model="searchForm.endTime" placeholder="状态">
          <el-option
            v-for="item in  endTimeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
        <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table  :data="contractList" border v-loading="loading">
      <el-table-column label="合同编号" >
        <template   slot-scope="scope">
          <span>{{scope.row.contractNo || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shop.shopName" label="店铺名称" ></el-table-column>
      <el-table-column prop="shop.shopLegalName" label="商户法人" ></el-table-column>
      <el-table-column label="起始日期">
        <template   slot-scope="scope">
          <span>{{scope.row.contractStartDate | filterDateForDay}}</span>
        </template>
      </el-table-column>
      <el-table-column label="截止日期">
        <template   slot-scope="scope">
          <span>{{scope.row.contractEndingDate | filterDateForDay}}</span>
        </template>
      </el-table-column>
      <el-table-column label="剩余天数">
        <template   slot-scope="scope">
          <span :class="checkHighLight(scope.row.contractEndingDate)?'highLight':''">{{scope.row.contractEndingDate | filterExpireDay}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template   slot-scope="scope">
          <span>{{scope.row.contractState | filteContractState}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.contractId)"  size="small"  type="primary">编辑</el-button>
          <el-button @click="showContractInfo(scope.row)"  size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageIndex"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="store.params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
    <contractInfo :params="contractInfoShow"/>
  </div>
</template>

<script>
  import contractInfo from './contractInfo.vue'
  export default {
    data() {
      return {
        pickerOptions1:{
          disabledDate: (time)=>{
            const time1 = this.searchForm.beginStartDate.replace(/-/g,'/');
            const time2 = new Date(time1).getTime();
            return  time.getTime() < time2;
          }
        },
        pickerOptions2:{
          disabledDate: (time)=>{
            const time1 = this.searchForm.overStartDate.replace(/-/g,'/');
            const time2 = new Date(time1).getTime();
            return  time.getTime() < time2;
          }
        },
        edit:false,
        loading: true,
        contractList:[],
        pageTotal:0,
        store:{
          marketOptions:[],
          shopOptions:[],
          params:{
            pageSize:10,
            pageIndex:1,
            marketId:this.$marketId,
            shopId: ''
          },
        },
        endTimeList:[
          { value: null, name: '不限'},
          { value: 7,name: '7天以内'},
          { value: 15,name: '15天以内'},
          { value: 30,name: '30天以内'},
        ],
        searchForm: {
          pageSize:10,
          pageIndex:1,
          marketId: this.$marketId,
          shopId: '',
          beginStartDate:'',
          beginEndDate:'',
          overStartDate:'',
          overEndDate: '',
          endTime: '',
          shopLegalName: ''
        },
        contractInfoShow: {
          paramsData: {},
          showInfo:false,
        },
      }
    },
    components:{
      contractInfo
    },
    watch:{
      'searchForm.marketId'(){
        if (this.searchForm.marketId){
          this.store.params.marketId = this.searchForm.marketId;
          this.$store.commit('getShopOptions',this.store)
        }
      }
    },
    created(){
      this.$store.commit('getMarketOptions',this.store)
      this.$store.commit('getShopOptions',this.store)
    },
    activated() {
      if (this.$route.query.shopId){
        this.searchForm.marketId = this.$route.query.marketId
        this.searchForm.shopId = this.$route.query.shopId
      }
      this.getData();
    },
    methods:{
      searchData(){
        this.searchForm.pageIndex = 1;
        this.getData();
      },
      getData(){
        this.loading = true;
        this.$axios.get(this.$api.getContractList,{params: this.searchForm})
          .then((res)=>{
            this.contractList = res.data.result;
            this.loading = false;
          })
        this.$axios.get(this.$api.getContractNum, {params: this.searchForm})
          .then((res)=>{
            this.pageTotal = res.data.result
          })
      },
      clearSearch(){
        this.searchForm = {
          pageSize:10,
          pageIndex:1,
          marketId: this.$marketId,
          shopId: '',
          beginStartDate:'',
          beginEndDate:'',
          overStartDate:'',
          overEndDate: '',
          endTime: '',
          shopLegalName: ''
        };
        this.getData();
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.searchForm.pageIndex = val;
        this.getData();
      },
      handleEdit(contractId) {
        this.$router.push("/contract/contractForm/"+ contractId)
      },
      showContractInfo(obj){
        this.contractInfoShow.paramsData = obj
        this.contractInfoShow.showInfo=true
      },
      checkHighLight(value){
        var today = parseInt(value) - new Date().getTime();
        var days = Math.round(today / (1000 * 3600 * 24));
        if (parseInt(days) == 0) {
          return true
        }
        return false
      }
    },

  };
</script>
<style scope>
  .highLight{
    color:red;
    font-weight: bold;
    font-size: 16px;
  }
</style>

